<template>
  <div class="index">
    <div class="header">
      <div class="iconfont back-icon" @click="fanhui">&#xe6b1;</div>
      <div class="header-left">修改信息</div>
      <button class="btn" @click="doedit">保存</button>
    </div>

    <div class="body" v-for="(item,index) of user">
   <div class="title"><label class="label">昵称：</label><input class="neirong" @click="edit(index)" v-model="username"/></div>
   <div class="title">
     <label class="label">性别：</label>
     <div class="sex">
     <span>男：</span>
     <input type="radio" name="gender" value="10" v-model="sex" title="男">
     <span style="margin-left: 15px">女：</span>
      <input type="radio" name="gender" value="20" v-model="sex" title="女" checked>
     </div>
    </div>
      <div class="title"><label class="label">年龄：</label><input class="neirong" v-model="age"/></div>
      <div class="title"><label class="label">所在地：</label><input class="neirong" v-model="area"/></div>
      <div class="title"><label class="label">邮箱：</label><input class="neirong" v-model="email"/></div>
      <div class="title"><label class="label">职业：</label>
        <select name="job" v-model="job" required lay-verify="required" autocomplete="off" class="neirong" style="background-color: white;height: 35px;font-size: 20px">
          <option selected>计算机/互联网/通信</option>
          <option value="生产/工艺/制造">生产/工艺/制造</option>
          <option value="医疗/护理/制药">医疗/护理/制药</option>
          <option value="金融/银行/投资/保险">金融/银行/投资/保险</option>
          <option value="商业/服务业/个体经营">商业/服务业/个体经营</option>
          <option value="文化/广告/传媒">文化/广告/传媒</option>
          <option value="娱乐/艺术/表演">娱乐/艺术/表演</option>
          <option value="律师/法务">律师/法务</option>
          <option value="教育/培训">教育/培训</option>
          <option value="公务员/行政/事业单位">公务员/行政/事业单位</option>
          <option value="模特">模特</option>
          <option value="学生">学生</option>
          <option value="其他职业">其他职业</option>
        </select>
      </div>
    </div>

  </div>
</template>

<script>
    import axios from 'axios'

    export default {
        name: "PersonalEdit",
        data () {
            return {
                user: [],
                user_id: '',
                username: '',
                geyan: '',
                sex: '',
                area: '',
                job: '',
                age: 0,
                email: ''
            }
        },
        created () {
            axios.get('/api/personal/index.html')
                .then((res) => {
                    console.log(res);
                    this.user = res.data.data;
                    if(this.user===null){
                        console.log('user为空')
                    }
                })
                .catch((err) => {
                    console.log(err);
                });

            //     axios.get('/api/emplist/depts.html')
            //         .then((res) => {
            //             console.log(res);
            //             this.depts = res.data.data;
            //         })
            //         .catch((err) => {
            //             console.log(err);
            //         });
        },
        methods: {
            edit (index) {
                let emp = this.user[index]
                this.user_id=emp.user_id
                this.username = emp.username
                this.sex = emp.sex
                this.age = emp.age
                this.area = emp.area
                this.email=emp.email
                this.job=emp.job
            },
            doedit () {
                axios.post('/api/personal/domoduser.html',{
                    user_id:this.user_id,
                    username: this.username,
                    sex: this.sex,
                    age: this.age,
                    email: this.email,
                    job: this.job
                })
                    .then((res) => {
                        console.log(res)
                        let i = this.user.findIndex(item => item.user_id === this.user_id);

                        Vue.set(this.user, i, res.data.data)

                        // this.people[i].Ename = res.data.data.Ename
                        // this.people[i].Eage = res.data.data.Eage
                        // this.people[i].dept = res.data.data.dept
                    })
                    .catch((err) => {
                        console.log(err);
                    });
            },
            fanhui () {
                this.$router.push('/personal')
            }
        }
    }
</script>

<style lang="stylus" scoped>
  .index
    .header
      background-color: lightblue
      line-height 50px
      color lightyellow;
      width 100%
      position absolute
      top 0
      left 0
      .back-icon
        font-size 20px
        margin-top -4px
        margin-left -20px
      .header-left
        font-size 20px
        text-align center
      .btn
        float: right
        margin-top -39px
        border none
        margin-right 7px
        font-size 20px
        color lightyellow
        background-color lightblue
    .body
      margin-top 100px
      margin-left 20px
      .title
        width 100px
        margin-top 17px
        .label
          font-size 1.4rem
        .sex
          position: relative;
          left: 82px;
          display: flex;
          top: -23px;
        .neirong
          border-bottom darkgray 1px solid
          border-left-width 0px
          border-right-width 0px
          border-top-width 0px
          position relative
          left 82px
          text-align center
          font-size 20px
          top -29px
</style>
